<template>
  <div class="search-temp">
    <input
      type="text"
      :placeholder="placeholder"
      v-model="inputValue"
			@keyup.enter="onSearch"
			@input="onInput"
    />
		<p @click="onSearch">搜索</p>
    <img
      class="icon-search"
      src="https://img.hzanchu.com/acimg/4077d1be0ea8a9c009926fab89effe16.png"
      alt=""
    />
    <img
			v-if="modelValue?.length"
      @click="onDelete"
      class="icon-delete"
      src="https://img.hzanchu.com/acimg/6cfcbbc91a02575685a796328d66a2a3.png"
      alt=""
    />
  </div>
</template>

<script setup>
import { defineProps, defineEmits, ref, watch } from 'vue'
import { debounce } from 'lodash'

const props = defineProps({
  placeholder: {
    type: String,
    default: '请输入'
  },
  modelValue: {
    type: String,
    default: ''
  }
})

const inputValue = ref('')
const emit = defineEmits([
  'update:modelValue',
  'onChange',
  'onSearch',
])

const onInput = debounce(($event) => {
  emit('update:modelValue', $event.target.value)
  // emit('onChange', $event.target.value)
}, 1)

const onDelete = () => {
	inputValue.value = ''
	emit('update:modelValue', '')
}

const onSearch = () => {
	emit('onSearch', inputValue.value)
}

watch(() => props.modelValue, () => {
	inputValue.value = props.modelValue
}, { immediate: true })
</script>

<style scoped lang="less">
.search-temp {
  width: 100%;
	box-sizing: border-box;
  position: relative;
	display: flex;
	align-items: center;
	padding: 24px 32px;
	input {
    width: 100%;
    height: 80px;
    line-height: 80px;
    border-radius: 40px;
    background: #F6F7F8;
    font-size: 32px;
    box-sizing: border-box;
    padding: 0 78px;
    &::placeholder {
      color: #BEBEBE;
    }
  }
	p {
		white-space: nowrap;
		color: var(--van-primary-color);
		margin-left: 24px;
	}
  .icon-search {
    position: absolute;
    top: 50%;
    left: 64px;
    transform: translateY(-50%);
    width: 30px;
    height: 32px;
  }
  .icon-delete {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 142px;
    width: 32px;
    height: 32px;
    opacity: .7;
  }
}
</style>
